<template>
  <Main>
    <div class="depart-tree">
      <el-tabs
        tab-position="left"
        v-model="categoryId"
        style="height: 100%"
        @tab-click="handleNodeClick"
      >
        <el-tab-pane
          v-for="(item, index) in LeftTableData"
          :key="index"
          :label="item.type"
          :name="item.objectId"
          class="el-tabs__nav-scroll"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="任务名称">
          <el-input size="small" v-model="formInline.name" placeholder="任务名称"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <div class="block">
            <el-date-picker v-model="formInline.startTime" type="datetime" placeholder="从"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="-">
          <div class="block">
            <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="到"></el-date-picker>
          </div>
        </el-form-item>
        <!-- <el-form-item label="完成时间">
        <div class="block">
          <el-date-picker v-model="formInline.finishStartTime" type="datetime" placeholder="从"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="-">
        <div class="block">
          <el-date-picker v-model="formInline.finishEndTime" type="datetime" placeholder="到"></el-date-picker>
        </div>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%" row-key="id" :empty-text="emptyText">
        <el-table-column fixed prop="id" label="任务ID"></el-table-column>
        <el-table-column prop="name" label="任务名称"></el-table-column>
        <el-table-column prop="processInstanceId" label="流程实例ID"></el-table-column>
        <el-table-column prop="processInstanceName" label="流程实例名称"></el-table-column>
        <el-table-column prop="processDefinitionId" label="流程定义ID"></el-table-column>
        <el-table-column prop="startTime" label="启动时间" :formatter="timeFormat"></el-table-column>
        <el-table-column prop="endTime" label="完成时间" :formatter="endTimeFormat"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item itema" effect="dark" content="查看流程图" placement="top-start">
            <el-popover
              placement="right"
              trigger="click"
              style="padding-right:10px;padding-left:10px"
            >
              <img :src="lookImg(scope.row.processInstanceId)" />
              <el-button slot="reference" type="primary" size="small">
                <i class="el-icon-view"></i>
              </el-button>
            </el-popover>
          </el-tooltip>
        </template>
        </el-table-column>-->
      </el-table>
      <page
        :page="formInline.current"
        :limit="formInline.size"
        :total="formInline.total"
        @change="changePage"
      ></page>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { activeUrl } from "@/config/env";

const urls = {
  list: activeUrl + "/hastodoTasksList",
  imgPath: activeUrl + "/instance/getImg?processInstanceId=",
  leftList: activeUrl + "/category/category/list"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    lookImg(processInstanceId) {
      // 显示流程图
      return urls.imgPath + processInstanceId  + '&' + new Date();
    },
    timeFormat(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.startTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    endTimeFormat(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.endTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    leftFetch() {
      // 分类初始化
      axios.get(urls.leftList).then(res => {
        const data = res.data.result;
        this.LeftTableData = data;
        this.categoryId = data[0].objectId;
        this.fetch();
      });
    },
    fetch() {
      // 列表初始化
      this.formInline.category_id = this.categoryId;
      axios.post(urls.list, this.formInline).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    handleNodeClick(e) {
      // 分类点击
      this.categoryId = e.name;
      this.fetch();
    }
  },
  mounted() {
    this.leftFetch();
  },
  data() {
    return {
      categoryId: null,
      formInline: {
        name: null,
        startTime: null,
        endTime: null,
        finishStartTime: null,
        finishEndTime: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: []
      },
      tableData: [],
      LeftTableData : "",
      emptyText : "加载中..."
    };
  },
  components: {
    Main,
    page
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 10%;
  top: 50px;
  left: 6px;
  bottom: 0px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 90%;
  position: absolute;
  right: 6px;
  height: 92%;
  overflow-y: auto;
}
/deep/ .el-tabs__nav-scroll {
  width: 115px !important;
  padding-top: 20px;
}
/deep/ .itema {
  margin-left: 10px;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
  top: 25px;
}
</style>